<template>
  <div class="hore-list">
    <button class="btn btn-primary" @click="add">添加英雄</button>
    <hr />
    <table class="table table-striped">
      <thead>
        <tr>
          <th>ID</th>
          <th>英雄名称</th>
          <th>英雄性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.time | formatTime}}</td>
          <td>
            <button class="btn btn-success" style="margin-right:10px" @click="edit(item.id)">编辑</button>
            <button class="btn btn-danger" @click="del(item.id)">删除</button>
          </td>
        </tr>
        <tr v-if="list.length===0">
          <td colspan="5" style="text-align:center">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import moment from "../js/moment";

export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    getList() {
      this.$http.get("http://localhost:6005/heroList").then((res) => {
        this.list = res.data;
      });
    },
    del(id) {
      this.$http.delete(`http://localhost:6005/heroList/${id}`).then(() => {
        this.getList();
      });
    },
    add() {
      //完成路由跳转
      this.$router.push({
        path: "/heroadd",
      });
    },
    edit(id) {
      this.$router.push({
        path: "/heroedit",
        query: {
          id,
        },
      });
    },
  },
  mounted() {
    this.getList();
  },
  filters: {
    formatTime(val) {
      return moment(val).format("YYYY-MM-DD");
    },
  },
};
</script>

<style>
</style>